<template>
  <div class="container">
    <div class="head"><h1>轮播图管理</h1></div>
    <div class="main">
      <el-row :gutter="10">
        <el-col :span="8">
          <div class="grid-content">
            <div class="title1"><h3>添加轮播图</h3></div>
            <el-form :label-position="labelPosition">
              <!-- <el-form-item label="序号">
                <el-input v-model="jid"></el-input>
              </el-form-item> -->
              <el-form-item label="公司名称">
                <el-input v-model="name"></el-input>
              </el-form-item>
              <el-form-item label="上传图片"> </el-form-item>
              <div class="upload">
                <el-upload
                  class="upload-demo"
                  drag
                  action="http://127.0.0.1:3000/v1/upslide"
                  multiple
                  :on-change="handleChange"
                  :file-list="fileList"
                  name="uploadFile"
                >
                  <div class="el-upload__text">
                    将文件拖到此处，或<em>点击上传</em>
                  </div>
                </el-upload>
              </div>
              <el-form-item label="文字说明">
                <el-input v-model="text"></el-input
              ></el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')"
                  >提交</el-button
                >
                <el-button @click="resetForm('ruleForm')">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="grid-content">
            <div class="title1"><h3>轮播图列表</h3></div>
            <table>
              <thead>
                <tr>
                  <th>
                    <input type="checkbox" />
                    全选
                  </th>
                  <th>序号</th>
                  <th>公司名称</th>
                  <th>轮播图</th>
                  <th>文字说明</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr
                  v-for="({ jid, img, comname, detail }, i) in carousel.data"
                  :key="i"
                >
                  <td><input type="checkbox" />选择</td>
                  <td>{{ jid }}</td>
                  <td>{{ comname }}</td>
                  <td class="img">
                    <img :src="imgBase + img" alt="" />
                  </td>
                  <td>{{ detail }}</td>
                  <td>
                    <button class="btn" @click="remove(jid)">删除</button>
                    <button class="btn">修改</button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState(["imgBase"]),
  },
  data() {
    return {
      labelPosition: "right",
      name: "",
      text: "",
      img: "",
      carousel: "",
      fileList: [{ name: "", url: "" }],
    };
  },
  mounted() {
    this.getCarousel();
  },
  methods: {
    //上传轮播图
    submitForm() {
      let url = "v1/slideshow";
      const { name, text, img } = this;
      // console.log(name, img, text);
      let margin = `comname=${name}&img=${img}&detail=${text}`;
      // console.log(margin);
      this.axios.post(url, margin).then((res) => {
        if (res.data.code == 200) {
          alert("提交成功");
          this.getCarousel();
        } else {
          alert("错误");
        }
      });

      // console.log(this.num, this.name, this.text)
    },
    //获取轮播图
    getCarousel() {
      const url = "v1/slideshow";
      this.axios.get(url).then((res) => {
        // console.log(res);
        this.carousel = res.data;
      });
    },
    //上传图片
    handleChange(file, fileList) {
      this.fileList = fileList.slice(-3);
      // console.log(fileList);
    },
    //删除轮播图
    remove(jid) {
      this.axios.delete(`v1/delslideshow?jid=${jid}`).then((res) => {
        // console.log("delete", res);
        if (res.data.code == 200) {
          alert("删除成功");
          this.getCarousel();
        } else {
          alert("删除失败");
        }
      });
    },
  },
};
</script>
<style scoped src='../assets/css/carousel.css'>
</style>
<style>
.el-icon-document:before {
  content: "" !important;
}
.el-upload-dragger {
  border: none;
  width: 100%;
  height: 40px;
}
</style>
